<template>
  <div class="login">
    <div class="loginDiv">
      <el-form ref="loginForm" v-loading="formLoadIng" :model="loginForm" :rules="loginRules" class="login-form login-form-reset">
        <div class="logo" />
        <h3 class="title">{{ $t('机构注册') }}</h3>
        <el-divider><i class="el-icon-key" /></el-divider>
        <el-form-item prop="fullName">
          <el-input
            v-model="loginForm.fullName"
            type="text"
            size="mini"
            auto-complete="new-password"
            clearable
            :placeholder="$t('请输入公司全称')"
          >
            <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="manageScale">
          <el-input
            v-model="loginForm.manageScale"
            type="text"
            size="mini"
            auto-complete="new-password"
            clearable
            :placeholder="$t('管理规模(亿)')"
          >
            <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="contact">
          <el-input
            v-model="loginForm.contact"
            type="text"
            size="mini"
            auto-complete="off"
            clearable
            :placeholder="$t('请输入联系人')"
          >
            <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            type="text"
            size="mini"
            auto-complete="off"
            clearable
            :placeholder="$t('请输入手机号')"
          >
            <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div style="position:relative;">
            <el-input v-model="loginForm.code" size="mini" clearable :placeholder="$t('请输入验证码')">
              <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
              <span slot="append" class="send" @click="sendMessage">
                <i v-if="isSend">{{ $t('获取验证码') }}</i>
                <i v-if="!isSend">{{ code }}</i>
              </span>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            v-model="loginForm.email"
            type="email"
            size="mini"
            auto-complete="off"
            clearable
            :placeholder="$t('请输入邮箱')"
          >
            <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="small"
            type="primary"
            style="width:100%;margin-top: 10px;"
            @keyup.enter.native="onRegister"
            @click.native.prevent="onRegister"
          >
            <span v-if="!loading">{{ $t('提 交') }}</span>
            <span v-else>{{ $t('提 交 中') }}...</span>
          </el-button>
        </el-form-item>
        <a class="recoverpw link_a" @click="toLogin">{{ $t('返回登录') }}</a>
      </el-form>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <p class="links">友情链接：
        <a href="https://link.smyun.net/s-fund.html" target="_blank">S基金</a> |
        <a href="https://link.smyun.net/serviceAgencies.html" target="_blank">服务机构</a> |
        <a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4OTgyNDA4NQ==&action=getalbum&album_id=2120720597201551370#wechat_redirect" target="_blank">J博士公开课</a> |
        <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MzU4OTgyNDA4NQ==&hid=3&sn=a32e8d74242d2469ba198e4481532f0a" target="_blank">投资数字化汇编</a> |
        <a href="https://link.smyun.net/file/%E5%85%AC%E5%8F%B8%E6%B3%95%E6%B3%95%E5%BE%8B%E6%B3%95%E8%A7%84%E6%B1%87%E7%BC%96.pdf" target="_blank">法律汇编</a>
      </p>
      <span>Copyright © 2016-2025 {{ $t('北京安信立融科技股份有限公司') }} - Powered By {{ $t('J博士') }}V4.0</span> |
      <span class="downChrome">
        <el-tooltip class="item" effect="dark" :content="$t('点击下载')" placement="top">
          <el-link :underline="false" href="https://www.google.cn/chrome/" target="_blank">{{ $t('推荐使用Chrome浏览器') }}</el-link>
        </el-tooltip>
      </span>
    </div>
    <div class="outsideChain">
      <el-tooltip class="item" effect="dark" :content="$t('预约咨询')" placement="left">
        <el-button type="text" icon="el-icon-service" @click="chat" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="$t('LP门户')" placement="left">
        <el-button type="text" @click="toOpen('https://lp.smyun.net/');">
          <el-link :underline="false">{{ $t('LP') }}</el-link>
        </el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="$t('GP门户')" placement="left">
        <el-button type="text" @click="toOpen('https://gp.smyun.net');">
          <el-link :underline="false">{{ $t('GP') }}</el-link>
        </el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="$t('企业填报端')" placement="left">
        <el-button type="text" @click="toOpen('https://deal.smyun.net/');">
          <el-link :underline="false">{{ $t('企') }}</el-link>
        </el-button>
      </el-tooltip>
    </div>
    <contactUs ref="contactUs" />
  </div>
</template>

<script>
import axios from 'axios'
import contactUs from '@/views/contactUs'

var checkEmail = (rule, value, cb) => {
  // 验证邮箱的正则表达式
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
  if (regEmail.test(value)) {
    // 合法的邮箱
    return cb()
  }
  cb(new Error('请输入合法的邮箱'))
}
export default {
  name: 'Login',
  components: {
    contactUs
  },
  data() {
    return {
      formLoadIng: false,
      loading: false,
      loginForm: {
        fullName: '',
        manageScale: '',
        contact: '',
        phone: '',
        code: '',
        email: ''
      },
      code: 60,
      isSend: true,
      loginRules: {
        fullName: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          manageScale: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          contact: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          phone: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: this.$t('请输入正确的手机号码'),
              trigger: 'blur'
            }
          ],
          code: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          email: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ]
      }
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    // 绑定登录页回车键登录事件
    window.addEventListener('keydown', this.keyDown)
  },
  methods: {
    keyDown(e) {
      if (e.keyCode === 13) {
        this.onRegister()
      }
    },
    sendMessage() {
      if (this.loginForm.phone) {
        if (this.isSend) {
          axios.get('https://m.backend.smyun.net/base/enrollAccount/generateVerificationCode?phoneNumber=' + this.loginForm.phone).then(res => {
            if (res.data.code === 200 && res.data.data) {
              this.isSend = false
              this.code = 60
              var times = setInterval(() => {
                this.code-- // 递减
                if (this.code <= 0) {
                  // <=0 变成获取按钮
                  this.isSend = true
                  clearInterval(times)
                }
              }, 1000) // 1000毫秒后执行
            }
          }).catch(() => {
            // console.log(error)
          })
        }
      } else {
        this.$notify({
          title: this.$t('请输入手机号'),
          message: '',
          type: 'warning'
        })
      }
    },
    onRegister() {
      this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            axios.get('https://m.backend.smyun.net/base/enrollAccount/getRegisterLogin?fullName=' + this.loginForm.fullName + '&manageScale=' + this.loginForm.manageScale + '&contact=' + this.loginForm.contact + '&phone=' + this.loginForm.phone + '&code=' + this.loginForm.code + '&email=' + this.loginForm.email).then(res => {
              if (res.data.code === 200 && res.data.data === 1) {
                this.$notify({
                  title: this.$t('提交成功'),
                  message: '',
                  type: 'success'
                })
                this.loading = false
                this.$refs.loginForm.resetFields()
              } else {
                this.$notify({
                  title: this.$t(res.data.msg),
                  message: '',
                  type: 'error'
                })
                this.loading = false
              }
              // console.log(res)
            }).catch(() => {
              // console.log(error)
            })
          }
        })
    },
    chat() {
      if (this.$refs.contactUs?.visible !== undefined) {
        this.$refs.contactUs.visible = true
      }
    },
    toLogin() {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>
<style scoped lang="scss">
.login .el-login-footer{
  height: unset!important;
  line-height: unset!important;
  bottom: 5px!important;
  .links{
    margin: 0;
    margin-bottom: 5px;
    a{
      text-decoration: underline;
    }
  }
}
/deep/.input-with-select{
  .el-input__inner{
    border-color: #DCDFE6  !important;
  }
}
/deep/.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 20px;
  .el-input__prefix{
    text-indent: .5em;
  }
  .el-input__inner{
    border-color: #DCDFE6  !important;
  }
}
.send{
  cursor: pointer;
  i{
    font-style: normal;
  }
}
.cursor{
  cursor: pointer;
}
.recoverpw{
  font-size: 14px;
}
</style>
